<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="父节点" prop="parentTitle">
        <el-select
          v-model="form.pid"
          :disabled="defaultParent.pid === 0"
          placeholder="请选择父节点"
        >
          <el-option
            :label="form.parentTitle"
            style="height: auto; padding: 0"
            :value="form.pid"
          >
            <el-tree
              ref="treeRef"
              :data="treeData"
              default-expand-all
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="路由" prop="path">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="组件" prop="component">
        <el-input v-model="form.component" />
      </el-form-item>
      <el-form-item label="特殊权限" prop="disabled">
        <el-radio-group v-model="form.disabled">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
        <el-alert :closable="false" type="warning">
          <template #title>
            <B>特殊权限</B>
            即该菜单具有不可删除、不可编辑的权限。一旦设定将无法更改，请谨慎处理
          </template>
        </el-alert>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import { doEdit } from '@/api/system_rule'
  import { getList } from '@/api/router'

  export default defineComponent({
    name: 'DepartmentManagementEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()

      const state = reactive({
        formRef: null,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'title',
        },
        form: {
          parentTitle: '顶级菜单',
          pid: 0,
          disabled: 0,
        },
        defaultParent: {
          parentTitle: '',
          pid: '',
        },
        rules: {
          parentTitle: [
            { required: true, trigger: 'blur', message: '请选择父节点' },
          ],
          title: [{ required: true, trigger: 'blur', message: '请输入名称' }],
          path: [{ required: true, trigger: 'blur', message: '请输入路由' }],
          component: [
            { required: true, trigger: 'blur', message: '请输入组件' },
          ],
          disabled: [
            { required: true, trigger: 'blur', message: '请选择菜单权限' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const fetchData = async () => {
        const {
          data: { list },
        } = await getList()
        state.treeData = list
        let obj = {
          title: '顶级菜单',
          ruleId: 0,
        }
        state.treeData.splice(0, 0, obj)
      }
      const handleNodeClick = (node) => {
        state.form.parentTitle = node.title
        state.form.pid = node.ruleId
      }
      const showEdit = (row) => {
        fetchData()
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
          state.defaultParent = {
            parentTitle: state.form.title,
            pid: state.form.pid,
          }
          //处理原有值并赋予
          if (state.form.pid === 0) {
            state.form.parentTitle = '顶级菜单'
          } else {
            for (let i = 0; i < state.treeData.length; i++) {
              if (state.treeData[i].ruleId === state.form.pid) {
                state.form.parentTitle = state.treeData[i].title
                break
              }
            }
          }
          console.log(state.form)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          parentTitle: '顶级菜单',
          pid: 0,
          disabled: 0,
        }
        state.defaultParent = {
          parentTitle: '',
          pid: '',
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        handleNodeClick,
        showEdit,
        close,
        save,
      }
    },
  })
</script>
